<template>
  <div>
    <HeaderGuide>订单</HeaderGuide>
    <div class="div">
      <div>
        <div>
          <img :src="thumb" width="60px"height="60px">
        </div>
        <div>
          <div class="title">
            {{title}}
            <span  class="span1">状态：已支付</span>
          </div>
          <div class="desc">{{desc}}</div>
          <div class="price">
            <span>￥{{price}}</span>
            <span class="span">x{{count}}</span><br>
          </div>
        </div>
      </div>
    </div>
    <FooterGuide/>
  </div>
</template>

<script>
import FooterGuide from "../../components/FooterGuide/FooterGuide";
import HeaderGuide from "../../components/HeaderGuide/HeaderGuide";
export default {
  name: 'Order',
  data(){
    return{
      title:'商品名称',
      desc:'商品描述',
      thumb:'https://img01.yzcdn.cn/vant/ipad.jpeg',
      price:'8.0',
      count: 2,
    }
  },
  components:{
    FooterGuide,
    HeaderGuide
  }
}
</script>

<style scoped>
  *{
    margin: 0;
    padding: 0;
  }
  .div{
    position: absolute;
    top: 50px;
    width: 100%;
  }
  .div > div{
    border: 1px solid #ffe31a;
    display: flex;
  }
  .title{
    font-size: 15px;
    margin-bottom: 10px;
  }
  .desc{
    font-size: 13px;
    margin-bottom: 10px;
  }
  .price{
    font-size: 10px;
  }
  .span{
    position: absolute;
    right: 0px;
    font-size: 10px;
  }
  .span1{
    position: absolute;
    right: 0px;
    font-size: 10px;
    color: red;
  }
</style>
